<template>
  <div class="container">
    <h3>网格布局中 grid-template-columns</h3>
    <div class="wrapper mt-10">
      <!-- <div class="box a">A</div>
      <div class="box b">B</div>
      <div class="box c">C</div>
      <div class="box d">D</div>
      <div class="box e">E</div>
      <div class="box f">F</div>
      <div class="box g">G</div>
      <div class="box h">H</div>
      <div class="box i">I</div> -->
      <div class="box"><img src="./images/1.jpg" /></div>
      <div class="box "><img src="./images/2.jpg" /></div>
      <div class="box "><img src="./images/3.jpg" /></div>
      <div class="box "><img src="./images/4.jpg" /></div>
      <div class="box "><img src="./images/5.jpg" /></div>
      <div class="box "><img src="./images/1.jpg" /></div>
      <div class="box "><img src="./images/2.jpg" /></div>
      <div class="box "><img src="./images/3.jpg" /></div>
      <div class="box "><img src="./images/4.jpg" /></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "GridCss",
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="stylus" scoped>
/* *auto-fill 关键字：表示自动填充,只要浏览器能够容纳得下，就可以放置元素。所以当浏览器宽度变化时，网格项目的位置也 */
.wrapper2 {
  display: grid
  /* *fr 占满剩余的部分 */
  grid-template-columns: repeat(3, 1fr)
  /* *  grid-auto-rows属性为网格容器中的行设置大小，表示不小于100px,最大值为自适应 */
  grid-auto-rows: minmax(80px, auto)
  /* * grid-auto-flow属性 grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。 */
  /* *行间距和列间距都为20px
  grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
  grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式 */
}
.wrapper {
  /* 声明行的高度 */
  display: grid
  display: -ms-grid /**兼容ie */
  -ms-grid-rows: 100px 100px 100px/**兼容ie */
  grid-auto-rows: minmax(100px, auto)
  -ms-grid-columns: 100px 100px 100px/**兼容ie */
  grid-template-columns: repeat(3, 100px)
  grid-gap: 20px
  justify-content: center
}
.wrapper > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover; /**https://www.cnblogs.com/libo0125ok/p/8422617.html */
}
.a {
  // grid-column: 1 / 2
  // grid-row: 1
  background: #19CAAD
}
.b {
  /* *grid-column: 2 / 4  col2-start / col4-start */
  /* * grid-row: 1 / 3 row1-start /row3-start */
  background: #8CC7B5
}
.c {
  // grid-column: 1
  // grid-row: 2 / 5
  background: #D1BA74
}
/* *grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性 */
.d {
  // grid-column: 3
  // grid-row: 3
  background: #BEE7E9
}
.e {
  // grid-column: 2
  // grid-row: 3 / 5
  background: #E6CEAC
}
.f {
  // grid-column: 3
  // grid-row: 4
  background: #ECAD9E
}
.g {
  background: #DD98B2
}
.h {
  background: #ABE3B7
}
.i {
  background: #BFB540
}
.box {
  text-align: center
  font-size: 200%
  color: #fff
}
</style>
